<template>
<div>
    
    <codemirror v-on:cursorActivity="change" class="CodeMirror"  v-model="code"  :options="cmOptions"></codemirror>
    </div>
</template>
 
<script>
import {codemirror} from 'vue-codemirror'
import 'codemirror/lib/codemirror.css'
import "codemirror/theme/duotone-light.css";
import 'codemirror/keymap/sublime' //sublime编辑器效果
import "codemirror/theme/dracula.css"// 配置里面也需要theme设置为monokai
import "codemirror/mode/vue/vue.js" // 配置里面也需要mode设置为vue
import 'codemirror/addon/selection/active-line' //光标行背景高亮，配置里面也需要styleActiveLine设置为true
 import "codemirror/mode/javascript/javascript"; 
export default {
    components: {
        codemirror
    },
    props:['code'],
    data() {
        return {
            // 代码
            cmOptions: {
                mode: 'text/javascript',//模式
                tabSize: 4,// tab的空格个数
                theme: 'duotone-light',//主题样式
                lineNumbers: true,//是否显示行数
                fixedGutter:true,
                foldGutter: true,
                gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
                lineWrapping: true, //是否自动换行
                styleActiveLine: true,//line选择是是否加亮
                matchBrackets: true,//括号匹配
                autofocus: true
              }
        }
    },
  
    mounted(){
    
    },
    watch:{
       
    },
    methods:{
        change(){
            this.$emit("chanageCode",this.CodeTem)
        }
    }
}
</script>
 
<style>
.CodeMirror { text-align: left; 
width: 98%;
height: 450px;
float:left
}

</style>
